var express = require('express');
var app = express();
import createStore from './redux/createStore';
import {matchRoutes} from 'react-router-config';

import {Provider} from 'react-redux';
import {fmRoutes} from './util';
// 同构路由
import { StaticRouter,Route,matchPath} from 'react-router-dom';


import React from 'react';
import { renderToString } from 'react-dom/server';
import Routes from './Route';

app.use(express.static('dist/public'));

app.get('*', function(req, res){
  const store = createStore();
  // 解决异步数据无法刷到服务端
  // 服务端加载store这里的store一定是空的
  // 如果这里拿到数据在填充store在渲染就搞定了。

  // 为了解决采用步骤
  // 1.改造home组件加上loadData 在home这个组件上加上静态方法 Home.loadData
  // 2.store到底加载什么需要结合路由来整
  // 3.改造路由 route
  // 4.改造服务端客户端的引用
  
  //5.根据路由的路径往组件加数据
  const MRoutes = matchRoutes(Routes, req.path);
  
  //6.获取所有的redux模型的异步处理模型。
  const promises = [];
  
  MRoutes.forEach((rt)=>{
      rt.route.loadData && promises.push(rt.route.loadData(store));
  });  
  // 7.让loadData都执行一次 promise all
  Promise.all(promises).then(()=>{
  // 数据获取完毕执行   
  const Rter = () => {
    return (
        <Provider store={store}>
        <StaticRouter location={req.path}  context={{}}>
            {fmRoutes(Routes)}
        </StaticRouter>
        </Provider>
    );
  };
  const rdStr = renderToString(<Rter />);

  res.send(`<div id="root">${rdStr}</div><script>window.state=${JSON.stringify(store.getState())}</script><script src="/index.js"></script>`);
  }, () => {

  })
});

app.listen(3001, ()=>{
console.log('listend');
});
